
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>角色管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">角色列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                  <input type="text" name="roleName" id="roleName" autocomplete="off" placeholder="角色名称" class="layui-input">
                </div>
                <button id="search" class="layui-btn" data-type="reload">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
              <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
              <button class="layui-btn" data-type="del">删除</button>
            </div>
          </div>
          <table id="Pay_Mgr_Role_dataAll" lay-filter="Pay_Mgr_Role_dataAll"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script type="text/html" id="payBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="perm">分配权限</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layui/layui-xtree/layui-xtree.js"></script>

<script>
    layui.use(['admin', 'table', 'util','form'], function() {
        var $ = layui.$
            , admin = layui.admin
            , table = layui.table
            , element = layui.element
            , view = layui.view
            ,layer =layui.layer
            , form = layui.form;

        element.render('breadcrumb', 'breadcrumb');

        //角色列表
        table.render({
            elem: '#Pay_Mgr_Role_dataAll'
            , url: layui.setter.baseUrl + '/sys/role/list' //列表接口
            , where: {
                access_token: layui.data(layui.setter.tableName).access_token
            }
            , id: 'tableReload'
            , page: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'roleId', title: '角色ID'}
                , {field: 'roleName', title: '角色名称'}
                , {field: 'edit', width: 260, title: '操作', toolbar: '#payBar'}
            ]]
            , skin: 'line'
        });

        //监听工具条
        table.on('tool(Pay_Mgr_Role_dataAll)', function (obj) {
            var data = obj.data;
            if (obj.event === 'perm') {

                location.hash = "/sys/perm/perm_save/roleId=" + data.roleId;

            } else if (obj.event === 'del') {

                layer.confirm('确认删除么', function (index) {
                    admin.req({
                        url: layui.setter.baseUrl + '/sys/role/delete',
                        data: {
                            roleIds: data.roleId
                        },
                        success: function () {
                            layer.msg('删除成功', {
                                icon: 1
                            });
                            table.reload("tableReload");
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                var roleId = data.roleId;

                admin.req({
                    type: 'get',
                    url: layui.setter.baseUrl + '/sys/role/get',
                    data: {
                        roleId: roleId
                    },
                    error: function (err) {
                        layer.alert(JSON.stringify(err.field), {
                            title: '错误提示'
                        })
                    },
                    success: function (res) {
                        if (res.code == 0) {

                            admin.popup({
                                title: '修改角色'
                                , area: ['400px', '260px']
                                , id: 'LAY-popup-content-edit'
                                , success: function (layero, index) {
                                    view(this.id).render('sys/role/role_edit').done(function () {
                                        form.render(null, 'layuiadmin-app-form-list');
                                        var body = layer.getChildFrame('body', index);
                                        body.find('#email').val(data.email);
                                        form.val("layuiadmin-app-form-list", {

                                            "roleId": data.roleId,
                                            "roleName": data.roleName

                                        })
                                        form.render();
                                        form.on('submit(roleEdit)', function (data) {
                                            //这里可以写ajax方法提交表单
                                            $.ajax({
                                                type: "POST",
                                                url: layui.setter.baseUrl + '/sys/role/update',
                                                data: "params=" + JSON.stringify(data.field),
                                                success: function (res) {
                                                    if (res.code == 0) {
                                                        /*layer.alert(res.msg,{title: "保存成功"},function(index){
                                                            table.reload('tableReload');
                                                            layer.closeAll();
                                                        })*/
                                                        layer.msg('保存成功', {
                                                            offset: '15px'
                                                            ,icon: 1
                                                            ,time: 1000
                                                        }, function(){
                                                            table.reload('tableReload');
                                                            layer.closeAll();
                                                        });
                                                    } else {
                                                        /*layer.alert(res.msg, {
                                                            title: '保存失败'
                                                        });*/
                                                        layer.msg('保存失败', {
                                                            offset: '15px'
                                                            ,icon: 1
                                                            ,time: 1000
                                                        });
                                                    }
                                                }
                                            });
                                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                        });

                                    });
                                }
                            });


                        }
                    }
                })


            }
        });


        // 搜索
        var $ = layui.$, active = {
            reload: function () {
                var roleName = $("#roleName").val();
                var roleId =$('#roleId').val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        roleId: roleId,
                        roleName: roleName,
                    }
                });
            }

            , add: function (othis) {
                admin.popup({
                    title: '添加角色'
                    , area: ['400px', '230px']
                    , id: 'LAY-popup-content-add'
                    , success: function (layero, index) {
                        view(this.id).render('sys/role/role_add').done(function () {

                            form.render(null, 'layuiadmin-app-form-list');

                            //监听提交
                            form.on('submit(roleAdd)', function (data) {
                                //这里可以写ajax方法提交表单
                                $.ajax({
                                    type: "POST",
                                    url: layui.setter.baseUrl + '/sys/role/add',
                                    data: "params=" + JSON.stringify(data.field),
                                    success: function (res) {
                                        if (res.code == 0) {
                                            table.reload('tableReload');
                                            layer.close(index);
                                        } else {
                                            layer.alert(res.msg, {
                                                title: '保存失败'
                                            });
                                        }
                                    }
                                });
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                            form.render();

                        });
                    }
                });
            }

            , del: function(othis){
                var checkStatus = table.checkStatus("tableReload")
                    ,data = checkStatus.data; //获得选中的数据
                if(data.length === 0) return layer.msg('请选择数据');
                console.log(data);
                layer.confirm('确定删除选中的数据吗？', function(){
                    var roleIds = "";
                    $.each(data, function(i, n){
                        roleIds = roleIds + "," + n.roleId;
                    });
                    console.log("roleIds");
                    if(roleIds != "") {
                        roleIds = roleIds.substring(1);
                        admin.req({
                            url:layui.setter.baseUrl + '/sys/role/delete',
                            data: {
                                roleIds: roleIds
                            },
                            success: function(){
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                table.reload("tableReload");
                            }
                        });
                    }
                });
            }

        };
        $('#search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        form.render();
    });
</script>